<header class="group">

	<form>

    <h1 class="logo"><a>CodePen.io</a></h1>

		<div class="box-actions">

			<% if @slug %>

				<button id="fork">
					<strong>⌘K</strong> Fork
				</button>

      <% if @owned %>

        <button id="update">
            <strong>⌘U</strong> Update
        </button>

      <% end %>

				<button id="new">
			 		<strong>⌘P</strong> Brand New Pen
			 	</button>	

			<% else %>
				<button id="save">
					<strong>⌘S</strong> Save
				</button>
			<% end %>

		</div> <!-- div.box-actions -->

	</form>

	<div class="app-actions">

		<% if not logged_in %>

			<a id="login" href="#" class="button">
				Github Auth
			</a>

		<% end %>
    
    <% if @slug %>

		<a id="sharing-button" class="button" href="#sharing-panel">
			Share
		</a>

		<section id="sharing-panel" class="sharing-panel">
			
			<div>
				<label>URL</label>
				<input type="url" onclick="this.focus();this.select()" id="sharing-url" readonly="readonly" value="">
			</div>

			<div>
				<label>Result</label>
				<input type="url" onclick="this.focus();this.select()" id="sharing-result" readonly="readonly" value="">
			</div>

			<div>
				<label>Embed</label>
				<textarea onclick="this.focus();this.select()" readonly="readonly" id="embed-code"></textarea>
				<label>&nbsp;</label>
				<p id="embed-panels">Default panel: 
					<a data-type="html" href="#" class="selected">HTML</a>
					<a data-type="css" href="#" >CSS</a>
					<a data-type="js" href="#" >JS</a>
					<a data-type="result" href="#" >Result</a>
				</p>
			</div>

			<div class="buttons">
				<a id="share-gist" class="button">Save as Gist</a>
				<a id="share-tweet" target="_blank" href="http://twitter.com/home?status=Check out my Code Pen!" class="button">Tweet</a>
				<a id="share-zip" href="#" class="button">Export .zip</a>
			</div>

		</section>
   	<% end # slug %>
		
		<% if logged_in %>

			<div class="user-stuff">
        <img src="/images/avatars/000001-chriscoyier.jpg">
        <a href="/user/">chriscoyier</a>
        <a class="logout-link" href="/logout" id="logout">log out</a>  
      </div>

    <% end %>

	</div><!-- div.app-actions -->

	<%= partial :social %>

</header>